<template>
    <div class="cont">
        <div class="datatitle">
            <p>资产</p>
            <div class="right"><span>全部资产</span><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u443.svg" alt=""></div>
        </div>
        <ul>
            <li>
                <p class="txt1">9</p>
                <p class="txt2">新增资产</p>
            </li>
            <li>
                <p class="txt1">3</p>
                <p class="txt2">新增采购单</p>
            </li>
            <li>
                <p class="txt1">5</p>
                <p class="txt2">待入库资产</p>
            </li>
            <li>
                <p class="txt1">1</p>
                <p class="txt2">新增盘点</p>
            </li>
        </ul>
        <div class="line"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u608.svg" alt=""></div>
        <ul>
            <li>
                <p class="txt1">9</p>
                <p class="txt2">新增资产领用</p>
            </li>
            <li>
                <p class="txt1">3</p>
                <p class="txt2">新增资产退库</p>
            </li>
            <li>
                <p class="txt1">5</p>
                <p class="txt2">新增资产借用</p>
            </li>
            <li>
                <p class="txt1">1</p>
                <p class="txt2">新增资产归还</p>
            </li>
        </ul>
        <div class="line"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u608.svg" alt=""></div>
        <div class="txt">
            <p class="txt1">4</p>
            <p class="txt2">新增资产调拨</p>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.cont{
    padding: 20px 15px 0;
    width: 440px;
    height: 360px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(242, 242, 242, 1);
    border-radius: 8px;
    .datatitle{
        padding: 0 8px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        p{
            text-align: left;
        }
        .right{
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            color: #999999;
            display: flex;
            align-items: center;
            img{
                margin-left: 5px;
            }
        }
    }
    ul{
        display: flex;
        position: relative;
        padding: 0 20px;
        margin-top: 23px;
        box-sizing: border-box;
        justify-content: space-between;
        z-index: 0;
        li{
            .txt1{
                height: 32px;
                color: #333333;
                font-weight: 700;
                font-style: normal;
                font-size: 20px;
                line-height: 32px;
            }
            .txt2{
                height: 32px;
                line-height: 32px;
                font-weight: 400;
                font-style: normal;
                font-size: 12px;
                color: #999999;
            }
        }
    }
    .line{
        img{
            width: 100%;
        }
    }
    .txt{
        margin-left: 0;
        padding-left: 20px;
        // box-sizing: border-box;
        width: 72px;
        .txt1{
                height: 32px;
                color: #333333;
                font-weight: 700;
                font-style: normal;
                font-size: 20px;
                line-height: 32px;
            }
        .txt2{
            white-space: nowrap;
            height: 32px;
            line-height: 32px;
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            color: #999999;
        }
    }
}
</style>